<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<title>VLC Plugin test page</TITLE>
<style>
  .inputTrackerInput {
        height:20;
        width:30;
        font-family : Arial, Helvetica, sans-serif;
        font-size : 12px;
  }
</style>

<script language="JavaScript"><!--
function init()
{
    if( navigator.appName.indexOf("Microsoft Internet")==-1 )
    {
        onVLCPluginReady()
    }
    else if( document.readyState == 'complete' )
    {
        onVLCPluginReady();
    }
    else
    {
        /* Explorer loads plugins asynchronously */
        document.onreadystatechange=function()
        {
            if( document.readyState == 'complete' )
            {
                onVLCPluginReady();
            }
        }
    }
}

function getVLC(name)
{
    if (window.document[name])
    {
        return window.document[name];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1)
    {
        if (document.embeds && document.embeds[name])
            return document.embeds[name];
    }
    else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
    {
        return document.getElementById(name);
    }
}

function registerVLCEvent(event, handler)
{
    var vlc = getVLC("vlc");

    if (vlc) {
        if (vlc.attachEvent) {
            // Microsoft
            vlc.attachEvent (event, handler);
        } else if (vlc.addEventListener) {
            // Mozilla: DOM level 2
            vlc.addEventListener (event, handler, true);
        } else {
            // DOM level 0
            eval("vlc.on" + event + " = handler");
        }
    }
}

function unregisterVLCEvent(event, handler)
{
    var vlc = getVLC("vlc");

    if (vlc) {
        if (vlc.detachEvent) {
            // Microsoft
            vlc.detachEvent (event, handler);
        } else if (vlc.removeEventListener) {
            // Mozilla: DOM level 2
            vlc.removeEventListener (event, handler, true);
        } else {
            // DOM level 0
            eval("vlc.on" + event + " = null");
        }
    }
}

// JS VLC API callbacks
function handleMediaPlayerMediaChanged()
{
    document.getElementById("info").innerHTML = "Media Changed";
}

function handle_MediaPlayerNothingSpecial()
{
    document.getElementById("state").innerHTML = "Idle...";
}

function handle_MediaPlayerOpening()
{
    onOpen();
}

function handle_MediaPlayerBuffering(val)
{
    document.getElementById("info").innerHTML = val + "%";
}

function handle_MediaPlayerPlaying()
{
    onPlay();
}

function handle_MediaPlayerPaused()
{
    onPause();
}

function handle_MediaPlayerStopped()
{
    onStop();
}

function handle_MediaPlayerForward()
{
    document.getElementById("state").innerHTML = "Forward...";
}

function handle_MediaPlayerBackward()
{
    document.getElementById("state").innerHTML = "Backward...";
}

function handle_MediaPlayerEndReached()
{
    onEnd();
}

function handle_MediaPlayerEncounteredError()
{
    onError();
}

function handle_MediaPlayerTimeChanged(time)
{
    var vlc = getVLC("vlc");
    var info = document.getElementById("info");
    if( vlc )
    {
        var mediaLen = vlc.input.length;
        if( mediaLen > 0 )
        {
            // seekable media
            info.innerHTML = formatTime(time)+"/"+formatTime(mediaLen);
        }
    }
}

function handle_MediaPlayerPositionChanged(val)
{
    // set javascript slider to correct position
}

function handle_MediaPlayerSeekableChanged(val)
{
    setSeekable(val);
}

function handle_MediaPlayerPausableChanged(val)
{
    setPauseable(val);
}

function handle_MediaPlayerTitleChanged(val)
{
    //setTitle(val);
    document.getElementById("info").innerHTML = "Title: " + val;
}

function handle_MediaPlayerLengthChanged(val)
{
    //setMediaLength(val);
}

// VLC Plugin
function onVLCPluginReady()
{
    registerVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
    registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
    registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
    registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
    registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
    registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
    registerVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
    registerVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
    registerVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
    registerVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
    registerVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
    registerVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
    registerVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
    registerVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
    registerVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
    registerVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
    registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}

function close()
{
    unregisterVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
    unregisterVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
    unregisterVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
    unregisterVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
    unregisterVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
    unregisterVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
    unregisterVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
    unregisterVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
    unregisterVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
    unregisterVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
    unregisterVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
    unregisterVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
    unregisterVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
    unregisterVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
    unregisterVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
    unregisterVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
    unregisterVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}

//--></script>

<body onLoad="init();" onClose="close();">

<div style="width: 600; height: 200; top:200px; position: absolute; border: 1pt solid black; background: blue; border-radius: 5px; display: none;" id="overlay"></div>
<table>
<tr><td colspan="2">
MRL:
<input size="90" id="targetTextField" value="">
<input type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
<input type=submit value="Add" onClick="doAdd(document.getElementById('targetTextField').value);">
</td></tr>
<tr><td align="center" colspan="2">

<!--
Insert VideoLAN.VLCPlugin.2
-->
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        width="640"
        height="480"
        id="vlc"
        events="True">
<param name="MRL" value="" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="False" />
<param name="Volume" value="50" />
<param name="toolbar" value="true" />
<param name="StartTime" value="0" />
<EMBED pluginspage="http://www.videolan.org"
       type="application/x-vlc-plugin"
       version="VideoLAN.VLCPlugin.2"
       width="640"
       height="480"
       toolbar="true"
       loop="true"
       text="Waiting for video"
       name="vlc">
</EMBED>
</object>
</td></tr>
<tr><td colspan="2">
<table><tr>
<td valign="top" width="550">
<!--
Insert Slider widget
-->
<div id="inputTrackerDiv"></div>
</td><td width="15%">
<div id="info" style="text-align:center">-:--:--/-:--:--</div>
<div id="state" style="text-align:center">Stopped...</div>
</td></tr></table>
</td></tr>
<tr><td>
<input type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
<input type=button value="Stop" onClick='doStop();'>
&nbsp;
<input type=button value=" << " onClick='doPlaySlower();'>
<input type=button value="Reverse" onClick='doReverse();'>
<input type=button value=" >> " onClick='doPlayFaster();'>
&nbsp;
<input type=button value="Fullscreen" onClick='getVLC("vlc").video.toggleFullscreen();'>
<input type=button value="Version" onClick='alert("vlc " + getVLC("vlc").VersionInfo);'>
<input type=button value=" State " onClick='alert("state: " + getVLC("vlc").input.state);'>
</td><td align="right">
<SPAN style="text-align:center">Volume:</SPAN>
<input type=button value=" - " onClick='updateVolume(-10)'>
<SPAN id="volumeTextField" style="text-align:center">--</SPAN>
<input type=button value=" + " onClick='updateVolume(+10)'>
<input type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
</td>
</tr>
<tr><td>Playlist:
<input type=button value="Prev" onClick='getVLC("vlc").playlist.prev();'>
<input type=button value="Next" onClick='getVLC("vlc").playlist.next();'>
<input type=button value="Clear All" onClick='doPlaylistClearAll();'>
    Aspect Ratio:
    <select readonly onChange='doAspectRatio(this.value)'>
      <option value="default">Default</option>
      <option value="1:1">1:1</option>
      <option value="4:3">4:3</option>
      <option value="16:9">16:9</option>
      <option value="221:100">221:100</option>
      <option value="5:4">5:4</option>
    </select>
</td><td align="right">
<input type=button id="itemCount" value=" Items 0 " onClick='doItemCount();'>
<input size=4 value="" id="removeid"><input type=submit value="Delete" onClick="doRemoveItem(document.getElementById('removeid').value);">
</td>
</tr>
<tr><td>Audio Channel:
  <select readonly onClick='doAudioChannel(this.value);'>
    <option value=1>Stereo</option>
    <option value=2>Reverse Stereo</option>
    <option value=3>Left</option>
    <option value=4>Right</option>
    <option value=5>Dolby</option>
  </select>
</td>
<td>
<input type=button value="current channel" onClick='alert(getVLC("vlc").audio.channel);'>
</td>
</tr>
<tr><td> Audio Track:
<input type=button value=" + " onClick='doAudioTrack(1);'>
<SPAN id="trackTextField" style="text-align:center">--</SPAN>
<input type=button value=" - " onClick='doAudioTrack(-1);'>
<input type=button value="current track" onClick='alert(getVLC("vlc").audio.description(vlc.audio.track));'>
<input type=button value="number of track" onClick='alert(getVLC("vlc").audio.count);'>
</td>
<td>
<input type=button value="set slider" onClick='doSetSlider();'>
<input type=button value="get position" onClick='doGetPosition();'>
</td>
</tr>
<tr>
<td>Video Subtitle:
    <input type=button value=" + " onClick='doSubtitle(1);'>
    <SPAN id="spuTextField" style="text-align:center">--</SPAN>
    <input type=button value=" - " onClick='doSubtitle(-1);'>
    <input type=button value="current subtitle" onClick='alert(getVLC("vlc").subtitle.description(vlc.subtitle.track));'>
    <input type=button value="number of subtitle" onClick='alert(getVLC("vlc").subtitle.count);'>
</td>
</tr>
<tr>
<td>Deinterlacing:
    <input type=button value="BLEND" onClick='getVLC("vlc").video.deinterlace.enable("blend");'>
    <input type=button value="  X  " onClick='getVLC("vlc").video.deinterlace.enable("x");'>
    <input type=button value="Disable" onClick='getVLC("vlc").video.deinterlace.disable();'>
</td>
</tr>
<tr>
<td>Marquee video filter:
    <input type=button value="Enable" onClick='getVLC("vlc").video.marquee.enable();'>
    <input type=button value="Disable" onClick='getVLC("vlc").video.marquee.disable();'>
    <input size=4 value="" id="marqueeIntValue">
    <select readonly onClick="doMarqueeOption(this.value,document.getElementById('marqueeIntValue').value);">
        <option value=1>Color</option>
        <option value=2>Opacity</option>
        <option value=3>Position</option>
        <option value=4>Refresh</option>
        <option value=5>Size</option>
        <option value=6>Text</option>
        <option value=7>Timeout</option>
        <option value=8>X</option>
        <option value=9>Y</option>
    </select>
</td>
</tr>
<tr>
<td>Logo video filter:
    <input type=button value="Enable" onClick='getVLC("vlc").video.logo.enable();'>
    <input type=button value="Disable" onClick='getVLC("vlc").video.logo.disable();'>
    <input size=4 value="" id="logoIntValue">
    <select readonly onClick="doLogoOption(this.value,document.getElementById('logoIntValue').value);">
        <option value=1>File</option>
        <option value=2>Position</option>
        <option value=3>Opacity</option>
        <option value=4>Repeat</option>
        <option value=5>Delay</option>
        <option value=6>X</option>
        <option value=7>Y</option>
    </select>
</td>
</tr>
<tr>
<td>
    <input type=button id="telx" value="Teletext off" onClick='doToggleTeletext();'>
    Teletext page:
    <input size=4 value="100" id="telxPage" onClick='doTelxPage(document.getElementById("telxPage").value);'>
</td>
</tr>
</table>
<SCRIPT language="javascript">
<!--

var rate = 0;
var prevState = 0;
var telxState = false;
var canPause = true;
var canSeek = true;

function setPauseable(val)
{
    canPause = val;
}

function setSeekable(val)
{
    canSeek = val;
}

function doSetSlider()
{
    var vlc = getVLC("vlc");

    // set slider to new position
    if( vlc )
        vlc.input.time = (vlc.input.length/2);
}

function doGetPosition()
{
    var vlc = getVLC("vlc");

    // set slider to new position
    if (vlc)
        alert( "position is " + vlc.input.time);
}

function doReverse(rate)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = -1.0 * vlc.input.rate;
}

function doAudioChannel(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.audio.channel = parseInt(value);
}

function doAudioTrack(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.audio.track = vlc.audio.track + value;
        document.getElementById("trackTextField").innerHTML = vlc.audio.track;
    }
}

function doAspectRatio(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.video.aspectRatio = value;
}

function doSubtitle(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.subtitle.track = vlc.subtitle.track + value;
        document.getElementById("spuTextField").innerHTML = vlc.subtitle.track;
    }
}

function doTelxPage(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.video.teletext = parseInt(value);
}

function doToggleTeletext()
{
    var vlc = getVLC("vlc");

    if( vlc )
    {
        vlc.video.toggleTeletext();
        if (telxState)
        {
            document.getElementById("telx").innerHTML = "Teletext on";
            telxState = true;
        }
        else
        {
            document.getElementById("telx").innerHTML = "Teletext off";
            telxState = false;
        }
    }
}

function doItemCount()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        var count = vlc.playlist.items.count;
        document.getElementById("itemCount").value = " Items " + count + " ";
    }
}

function doRemoveItem(item)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.playlist.items.remove(item);
}

function doPlaylistClearAll()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.playlist.items.clear();
        while( vlc.playlist.items.count > 0)
        {
            // wait till playlist empties.
        }
        doItemCount();
    }
}

function updateVolume(deltaVol)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.audio.volume += deltaVol;
        document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
    }
}

function formatTime(timeVal)
{
    if( typeof timeVal != 'number' )
        return "-:--:--";

    var timeHour = Math.round(timeVal / 1000);
    var timeSec = timeHour % 60;
    if( timeSec < 10 )
        timeSec = '0'+timeSec;
    timeHour = (timeHour - timeSec)/60;
    var timeMin = timeHour % 60;
    if( timeMin < 10 )
        timeMin = '0'+timeMin;
    timeHour = (timeHour - timeMin)/60;
    if( timeHour > 0 )
        return timeHour+":"+timeMin+":"+timeSec;
    else
        return timeMin+":"+timeSec;
}

// Old method of querying current state
// function doState() - depreceated
function doState()
{
    var vlc = getVLC("vlc");
    var newState = 0;

    if( vlc )
        newState = vlc.input.state;

    if( newState == 0 )
    {
        // current media has stopped
        onEnd();
    }
    else if( newState == 1 )
    {
        // current media is openning/connecting
        onOpen();
    }
    else if( newState == 2 )
    {
        // current media is buffering data
        onBuffer();
    }
    else if( newState == 3 )
    {
        // current media is now playing
        onPlay();
    }
    else if( newState == 4 )
    {
        // current media is now paused
        onPause();
    }
    else if( newState == 5 )
    {
        // current media has stopped
        onStop();
    }
    else if( newState == 6 )
    {
        // current media has ended
        onEnd();
    }
    else if( newState == 7 )
    {
        // current media encountered error
        onError();
    }
}

/* actions */

function doGo(targetURL)
{
    var vlc = getVLC("vlc");

    if( vlc )
    {
        vlc.playlist.items.clear();
        while( vlc.playlist.items.count > 0 )
        {
            // clear() may return before the playlist has actually been cleared
            // just wait for it to finish its job
        }
        var options = [":rtsp-tcp"];
        var itemId = vlc.playlist.add(targetURL,"",options);
        options = [];
        if( itemId != -1 )
        {
            // play MRL
            vlc.playlist.playItem(itemId);
        }
        else
        {
            alert("cannot play at the moment !");
        }
        doItemCount();
    }
}

function doAdd(targetURL)
{
    var vlc = getVLC("vlc");
    var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
    if( vlc )
    {
        vlc.playlist.add(targetURL, "", options);
        options = [];
        doItemCount();
    }
}

function doPlayOrPause()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
            vlc.playlist.togglePause();
    }
}

function doStop()
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.playlist.stop();
}

function doPlaySlower()
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = vlc.input.rate / 2;
}

function doPlayFaster()
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = vlc.input.rate * 2;
}

function doMarqueeOption(option, value)
{
    var vlc = getVLC("vlc");
    val = parseInt(value);
    if( vlc )
    {
        if (option == 1)
            vlc.video.marquee.color = val;
        if (option == 2)
            vlc.video.marquee.opacity = val;
        if (option == 3)
            vlc.video.marquee.position = value;
        if (option == 4)
            vlc.video.marquee.refresh = val;
        if (option == 5)
            vlc.video.marquee.size = val;
        if (option == 6)
            vlc.video.marquee.text = value;
        if (option == 7)
            vlc.video.marquee.timeout = val;
        if (option == 8)
            vlc.video.marquee.x = val;
        if (option == 9)
            vlc.video.marquee.y = val;
    }
}

function doLogoOption(option, value)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        if (option == 1)
            vlc.video.logo.file(value);
        if (option == 2)
            vlc.video.logo.position = value;
        val = parseInt(value);
        if (option == 3)
            vlc.video.logo.opacity = val;
        if (option == 4)
            vlc.video.logo.repeat = val;
        if (option == 5)
            vlc.video.logo.delay = val;
        if (option == 6)
            vlc.video.logo.x = val;
        if (option == 7)
            vlc.video.logo.y = val;
    }
}

/* events */

function onOpen()
{
    document.getElementById("state").innerHTML = "Opening...";
    document.getElementById("PlayOrPause").value = "Pause";
}

function onBuffer()
{
    document.getElementById("state").innerHTML = "Buffering...";
    document.getElementById("PlayOrPause").value = "Pause";
}

function onPlay()
{
    document.getElementById("state").innerHTML = "Playing...";
    document.getElementById("PlayOrPause").value = "Pause";
    onPlaying();
}

function onEnd()
{
    document.getElementById("state").innerHTML = "End...";
}

var liveFeedText = ["Live", "((Live))", "(( Live ))", "((  Live  ))"];
var liveFeedRoll = 0;

function onPlaying()
{
        var vlc = getVLC("vlc");
        var info = document.getElementById("info");
        if( vlc )
        {
            var mediaLen = vlc.input.length;
            if( mediaLen > 0 )
            {
                // seekable media
                info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(mediaLen);
            }
            else
            {
                // non-seekable "live" media
                liveFeedRoll = liveFeedRoll & 3;
                info.innerHTML = liveFeedText[liveFeedRoll++];
            }
        }
}

function onPause()
{
    document.getElementById("state").innerHTML = "Paused...";
    document.getElementById("PlayOrPause").value = " Play ";
}

function onStop()
{
    var vlc = getVLC("vlc");

    document.getElementById("info").innerHTML = "-:--:--/-:--:--";
    document.getElementById("state").innerHTML = "Stopped...";
    document.getElementById("PlayOrPause").value = " Play ";
}

function onError()
{
    var vlc = getVLC("vlc");

    document.getElementById("state").innerHTML = "Error...";
}

//-->
</SCRIPT>
</body>
</HTML>
